<script setup lang="ts">
import { api } from '@/api/api';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const router = useRouter()

const handleSubmit = async () => {
  if (password.value !== confirmPassword.value) {
    message.error('密码不匹配，请检查您的输入。');
    return;
  }

  const formData = {
    username: username.value,
    password: password.value,
  }

  try {
    await api.post('/java/user/register', formData)

    message.success('注册成功！');
    router.push({ name: 'register2', params: { username: username.value } });
  }
  catch (error: any) {
    message.error(`请求失败。${error.msg}`);
  }
}
</script>

<template>
  <div class="registrationContainer">
    <img src="@/assets/logo.svg" alt="智链iLink" class="logo">
    <h1 class="logoTitle">
      智链iLink
    </h1>
    <div class="outside">
      <div class="registrationLeft">
        <h1 class="tagline">
          <span class="highlight">大学生创新创业</span>的卓越助力
        </h1>
        <img src="@/assets/798.png" alt="benefits and partners" class="benefitsPartners">
      </div>
      <div class="registrationRight">
        <h2 class="formTitle">
          填写信息
        </h2>
        <p class="text1">
          开启智链创新实践之旅
        </p>
        <form class="registrationForm" @submit.prevent="handleSubmit">
          <input v-model="username" type="text" placeholder="请输入您的用户名" required>
          <input v-model="password" type="password" placeholder="请输入您的密码" required>
          <input v-model="confirmPassword" type="password" placeholder="请再次输入您的密码" required>
          <button type="submit">
            注册试用
          </button>
        </form>
        <p class="loginLink">
          已有账号？ <router-link to="/login">
            去登录
          </router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.registrationContainer {
  display: flex;
  height: 100vh;
  background-color: #6295ff;
  position: relative;
}

.logo {
  position: absolute;
  top: 1.25rem;
  /* 20px / 16 = 1.25rem */
  left: 1.25rem;
  /* 20px / 16 = 1.25rem */
  height: 4rem;
  /* 64px / 16 = 4rem */
}

.logoTitle {
  color: white;
  margin-left: 7.5rem;
  /* 120px / 16 = 7.5rem */
  margin-top: 1.875rem;
  /* 30px / 16 = 1.875rem */
}

.outside {
  display: flex;
  height: 100vh;
  background-color: #6295ff;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.registrationLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-color: #6295ff;
  margin-right: 25rem;
  /* 400px / 16 = 25rem */
  max-width: 25rem;
  /* 400px / 16 = 25rem */
  min-width: 25rem;
  margin-top: auto;
  margin-bottom: auto;
}

.tagline {
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 1rem;
  margin-right: -9.125rem;
  /* -18px / 16 = -1.125rem */
  margin-top: 0.1rem;
  font-weight: 400;
  text-align: center;
}

.highlight {
  color: #75f0a1;
}

.benefitsPartners {
  width: 100%;
  max-width: 28.125rem;
  /* 450px / 16 = 28.125rem */
  margin-right: -9.125rem;
}

.registrationRight {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #ffffff;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  /* 10px / 16 = 0.625rem */
  border-radius: 0.5rem;
  width: 25rem;
  max-width: 25rem;
  min-width: 25rem;
  margin: auto;
}

.formTitle {
  margin-top: 1.6875rem;
  font-size: 1.875rem;

  text-align: center;
  font-weight: 530;
  margin-bottom: 2%;
}

.text1 {
  margin-top: 0;
  font-size: 1.25rem;

  text-align: center;
  margin-bottom: 7%;
}

.registrationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.registrationForm input {
  padding: 0.8rem;
  margin-bottom: 1.2rem;
  border: 1px solid #cecccb;
  border-radius: 0.25rem;
  font-size: 1.0625rem;
}

.registrationForm button {
  padding: 0.75rem;
  border: none;
  background-color: #6698ff;
  color: #fff;
  font-size: 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.registrationForm button:hover {
  background-color: #0056b3;
}

.loginLink {
  margin-top: 1rem;
  color: #000000;
  margin-bottom: 11%;
  text-align: center;
}

.loginLink a {
  color: #007bff;
  text-decoration: none;
}

@media (max-width: 768px) {
  .registrationContainer {
    flex-direction: column;
  }

  .registrationLeft,
  .registrationRight {
    max-width: 100%;
    min-width: 100%;
  }

  .benefitsPartners {
    margin-right: 0;
  }

  .tagline {
    font-size: 1.5rem;
    margin-right: 0;
  }
}
</style>
